<template>
  <div>
    <tableHeader />
    <!-- 设备详情模块 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>设备详情</span>
        </div>
      </template>
      <el-row :gutter="20">
        <!-- 基础信息 -->
        <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="24">
          <div class="detail">
            <el-descriptions :column="3" border direction="vertical">
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 网关/流量卡绑定的流量数据 -->
    <!-- <el-card
      v-if="access.single.gatewaycode !== ''"
      shadow="always"
      header="流量展示"
    >
      <GF :gateway-info="state.gatewayInfo" />
    </el-card> -->
    <!-- 网关绑定弹出框 -->
    <Gateway />
    <!-- 流量卡绑定弹出框 -->
    <Internet />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted, computed } from "vue";
import tableHeader from "./tableHeader.vue";
import { useAccess } from "@/store/backend/DeviceM/access";
import { useRouter, useRoute } from "vue-router";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import { useNavTabs } from "@/store/navTabs";
import { useBackendMonitor } from "@/store/backend/EquipM/monitor"; //实时设备监控仓库
import Gateway from "./popuoForm.vue";
import Internet from "./internetPopupForm.vue";
// import GF from "@/components/GatewayFlow/index.vue";
import QrcodeVue from "qrcode.vue";
import { useCarbon } from "@/store/backend/EquipM/activeCarbon";

const router = useRouter();
const route = useRoute();
const access = useAccess();
const navTabs = useNavTabs();
const monitor = useBackendMonitor();
const carbon = useCarbon();

const qrCode = ref("设备编号:" + access.single.code); //二维码内容

interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  currentPage: number;
  pageSize: number;
  total: number;
  // gatewayInfo: anyObj;
  carbonType: string;
  carbonDosage: number;
} = reactive({
  deviceList: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
  // gatewayInfo: { cardNumber: access.single.cardnumber },
  carbonType: "", //活性炭型号
  carbonDosage: 0, //活性炭用量
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};
//设备状态etag样式
// const itemstate = computed<string>(() => {
//   switch (access.single.state) {
//     case 0:
//       return "info";
//     case 1:
//       return "success";
//     case 2:
//       return "warning";
//     default:
//       return "danger";
//   }
// });
// //运行状态etag样式
// const estate = computed<string>(() => {
//   switch (access.single.estate) {
//     case 0:
//       return "success";
//     default:
//       return "warning";
//   }
// });
// //设备启停etag样式
// const openState = computed<string>(() => {
//   switch (access.single.openState) {
//     case 0:
//       return "info";
//     default:
//       return "";
//   }
// });

// const operating = computed<string>(() => {
//   switch (access.single.operating) {
//     case 1:
//       return "success";
//     default:
//       return "info";
//   }
// });

//网关绑定
// const gatewayBinding = () => {
//   //打开弹出框
//   access.switch ? "" : (access.gatewayShow = true);
//   access.model = "网关绑定";
// };
// //修改网关
// const changeGateway = () => {
//   access.switch ? "" : (access.gatewayShow = true);
//   access.model = "网关修改";
// };
// //流量卡绑定
// const internetBinding = () => {
//   access.switch ? "" : (access.internetNumShow = true);
//   access.model = "流量卡绑定";
// };
// //修改流量卡号
// const changeInternet = () => {
//   access.switch ? "" : (access.internetNumShow = true);
//   access.model = "流量卡修改";
// };

const handleSChange = () => {};
const handleInfo = (name: string, row: DeviceItem) => {
  console.log(row);
  monitor.$patch((state) => {
    state.loading = true;
    state.status = row.status;
  });
  router.push({ path: "/admin/EquipM/detail", query: { name } });
};

const handleSizeChange = () => {};
const handleCurrentChange = () => {};
const getCarbonInfo = () => {
  //判断该设备是否激活
  if (access.single.state !== 2) {
    //设备激活状态获取活性炭详情
    carbon.getCarbonItemById(access.single.id).then((res: any) => {
      state.carbonType = res.rows[0].type;
      state.carbonDosage = res.rows[0].usernum;
    });
  }
};

onMounted(() => {
  getCarbonInfo();
});
provide("access", access);
</script>
<style lang="scss" scoped>
.devicesTable {
  height: 63vh;
}

.lg-mb-20 {
  margin-bottom: 20px;
}
// 物联网模块
.internet {
}
.box-card {
  margin-bottom: 10px;
}
</style>
